<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>爱心下拉菜单</title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
		<style>
			body{width: 700px;
			text-align: center;margin: 0 auto;
			
			background-image: url(images/loginbac.jpg);
			background-size: 100%;
			}
			li{text-align: center;margin: 0 auto;list-style: none;font-size: 15px;}
			a{
				text-decoration: none;
			display: block;
			color: #fff;
			width: 120px;
			height: 40px;
			line-height: 40px;
			border: 1px solid #fff;
			border-width: 1px 1px 0 0;
			background: #255f9e;
			}
			#app{margin-left: 200px;
			float: left;
			}
			#app>li{
				list-style-type: none;
				float: left;
				text-align: center;
				position: relative;
				
			}
			#app li a:hover{color: #fff;background: #ffb100;}
			#app li ul{position: absolute;
			left: -40px;
			top: 40px;
			margin-top: 1px;
			font-size: 12px;
			}
			[v-cloak]{
				display: none;
			}
			/* 分界线 */
			html,body{height: 100%;}
			#box{width: 500px;height: 500px;margin: 0px auto;bottom: -150px;
			position: relative;}
			.heat{position: absolute;z-index: 2;
			background: linear-gradient(-90deg, black 0%, black 40%);
			animation: beat 0.7s ease 0s infinite normal;
			}
			@keyframes beat{
			    0%{
			        transform:scale(1) rotate(225deg);
			        box-shadow:0 0 40px black;
			    }
			    50%{
			        transform:scale(1.3) rotate(225deg);
			        box-shadow:0 0 70px black;
			    }
			    100%{
			        transform:scale(1) rotate(225deg);
			        box-shadow:0 0 40px black;
			    }
			}
			.size{width: 220px;height: 220px;top: 100px;border-radius: 110px;}
			.left{left: 62px;z-index: 3;}
			.right{right: 62px;}
			
			.center{
			    width:210px;
			    height:210px;
			    bottom: 100px;
			    left: 145px;
			    transform:rotateZ(225deg);
			    background: linear-gradient(-45deg, black 0%, black 40%);
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<li v-for="(item,index) in menulist" :key="index" @mouseover='item.show=!item.show' @mouseout='item.show=!item.show'>
			<a :href="item.url">
				{{item.name}}
			</a>
				<ul v-show='item.show'>
					<li v-for="(subitem,index) in item.subMenus" :key="index">
						<a href="images/如何增强自身抵抗力.mp4">
							{{subitem.name}}
						</a>
					</li>
				</ul>
			</li>
		</div>
		<div id="box">
			<div class="heat left size"></div>
			<div class="heat center"></div>
			<div class="heat right size"></div>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					menulist:[
						{
							name:'下拉导航菜单一',url:'images/如何增强自身抵抗力.mp4',show:false,
							subMenus:[
								{name:'子菜单1',url:'#'},
								{name:'子菜单2',url:'#'},
								{name:'子菜单3',url:'#'}
								// {name:'子菜单4',url:'#'},
								// {name:'子菜单5',url:'#'},
								// {name:'子菜单6',url:'#'}
							]
						},
						{
							name:'下拉导航菜单二',url:'images/如何增强自身抵抗力.mp4',show:false,
							subMenus:[
								{name:'子菜单1',url:'#'},
								{name:'子菜单2',url:'#'},
								{name:'子菜单3',url:'#'}
								// {name:'子菜单4',url:'#'},
								// {name:'子菜单5',url:'#'},
								// {name:'子菜单6',url:'#'}
							]
						},
						{
							name:'下拉导航菜单三',url:'images/如何增强自身抵抗力.mp4',show:false,
							subMenus:[
								{name:'子菜单1',url:'#'},
								{name:'子菜单2',url:'#'},
								{name:'子菜单3',url:'#'}
							// 	{name:'子菜单4',url:'#'},
							// 	{name:'子菜单5',url:'#'},
							// 	{name:'子菜单6',url:'#'}
							]
						}
					]
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>
